<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <meta referer="https://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html" >
</head>
<body>
  <h4>创建一个BFC</h4>
  <pre>
    可以通过给容器添加任何一个触发BFC的css样式，如
    overflow: scroll/hidden/auto（非none值）
    | display: flex/table-caption/table-cess/table/inline-block
    | float: left/right(非none值)
  </pre>
  <section class="section1">
    <style>
      .clearfix::after { content: ''; display: table; height: 0; font-size: 0;overflow: hidden; clear: both;}
      .section1 .container { overflow: hidden;}
    </style>
    <div class="container">
      <p> haha </p>
      Some Content here
      <p> hehe </p>
    </div>
    <div class="container">
      <p> haha </p>
      Some Content here
      <p> hehe </p>
    </div>
    <div class="container">
      <p> haha </p>
      Some Content here
      <p> hehe </p>
    </div>
  </section>
  <h3>多列布局</h3>
  <style>
    .container-column {}
    .container-column .column{ width: 31.33%; background-color:green; margin: 0 1%; float: left;}
    .container-column .column:last-child{ float: none; overflow: hidden;}

  </style>
  <section class="container-column clearfix">
    <div class="column">column1</div>
    <div class="column">column2</div>
    <div class="column">column3</div>
  </section>


  <h1>深入理解BFC和Margin Collapse</h1>
  <meta referer="https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html">
  <style>
  body {padding:0;margin: 0; text-align: center;} .wrapper {margin:30px;width: 450px;border:1px solid red;} .small-box {width: 50px;height: 50px;margin: 10px;background: #9cc;} .middle-box {width: 100px;height: 100px;margin: 20px;background: #99c;} .big-box {width: 120px;height: 120px;margin: 20px;background: #33e;} .floatL {float: left;} .floatR {float: right;} .clear {clear: both;} .posA {position: absolute;} .overHid{overflow: hidden;} .red {background: #f00;} .green {background: #0f0;} .blue {background: #00f;}
  </style>
  <!-- <div class="wrapper overHid">
      <div class="big-box blue">non-float</div>
      <div class="middle-box green floatL">
          <div class="small-box red"></div>
          float left
      </div>
  </div> -->

  <div class="wrapper overHid">
      <div class="big-box">non-float</div>
      <div class="middle-box green floatL">float left</div>
      <div class="middle-box red">non-clear</div>
  </div>
</body>
</html>